<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 引入Bootstrap等依赖 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    body { background-color: #f8f9fa; }
    .navbar { background-color: #3f51b5; }
    .card-header { background-color: #e9ecef; }
    .footer { background-color: #343a40; color: white; padding: 2rem 0; }
    .stat-number { font-size: 2.5rem; font-weight: bold; }
  </style>
</head>
<body>
<!-- 导航栏 -->

<nav class="navbar navbar-expand-lg navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <i class="fas fa-graduation-cap"></i>在线考试系统
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="/home/manage"><i class="fas fa-home"></i> 主页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/user/manage"><i class="fas fa-users-cog"></i> 用户管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/exam/manage"><i class="fas fa-book"></i> 考试管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/question/bank"><i class="fas fa-question-circle"></i> 题库管理</a>
        </li>
      </ul>

      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="/profile">
            <i class="fas fa-user-circle"></i> 个人信息
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/notifications">
            <i class="fas fa-bell"></i> 通知
            <span class="badge bg-danger">3</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/logout">
            <i class="fas fa-sign-out-alt"></i> 退出登录
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container mt-4">
  <h2 class="mb-4">用户管理</h2>

  <!-- 搜索表单 -->
  <form class="row mb-3" th:action="@{/admin/users/search}" method="get">
    <div class="col-md-3">
      <input type="text" class="form-control" name="keyword" placeholder="用户名/邮箱/真实姓名">
    </div>
    <div class="col-md-3">
      <select class="form-select" name="role">
        <option value="">全部角色</option>
        <option value="student">学生</option>
        <option value="teacher">教师</option>
      </select>
    </div>
    <div class="col-md-3">
      <button type="submit" class="btn btn-primary">搜索</button>
    </div>
  </form>

  <!-- 添加用户表单 -->
  <div class="card mb-4">
    <div class="card-header">添加新用户</div>
    <div class="card-body">
      <form th:action="@{/admin/users/add}" method="post">
        <div class="row">
          <div class="col-md-3">
            <!-- 修改添加用户表单中的用户ID输入框 -->
            <input type="text" class="form-control" name="userId" placeholder="用户ID" required
                   autocomplete="off">
          </div>
          <div class="col-md-3">
            <input type="text" class="form-control" name="userName" placeholder="用户名" required
                   autocomplete="off">
          </div>
          <div class="col-md-3">
            <input type="password" class="form-control" name="password" placeholder="密码" required
                   autocomplete="new-password">
          </div>
          <div class="col-md-3">
            <select class="form-select" name="role" required>
              <option value="student">学生</option>
              <option value="teacher">教师</option>
            </select>
          </div>
        </div>
        <div class="row mt-3">
          <div class="col-md-3">
            <input type="email" class="form-control" name="email" placeholder="邮箱" required>
          </div>
          <div class="col-md-3">
            <input type="text" class="form-control" name="phone" placeholder="手机号">
          </div>
          <div class="col-md-3">
            <input type="text" class="form-control" name="realName" placeholder="真实姓名">
          </div>
          <div class="col-md-3">
            <input type="number" class="form-control" name="classId" placeholder="班级ID（仅学生）">
          </div>
        </div>
        <button type="submit" class="btn btn-primary mt-3">添加用户</button>
      </form>
    </div>
  </div>

  <!-- 用户列表 -->
  <table class="table table-striped table-hover">
    <thead class="table-dark">
    <tr>
      <th>用户ID</th>
      <th>用户名</th>
      <th>角色</th>
      <th>邮箱</th>
      <th>手机号</th>
      <th>真实姓名</th>
      <th>班级</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${users}">
      <td th:text="${user.userId}"></td>
      <td th:text="${user.userName}"></td>
      <td th:text="${user.role}"></td>
      <td th:text="${user.email}"></td>
      <td th:text="${user.phone}"></td>
      <td th:text="${user.realName}"></td>
      <td th:text="${user.className} ?: '-'"></td>
      <td>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                data-bs-target="#editModal"
                th:data-userid="${user.userId}"
                th:data-username="${user.userName}"
                th:data-role="${user.role}"
                th:data-email="${user.email}"
                th:data-phone="${user.phone}"
                th:data-realname="${user.realName}"
                th:data-classid="${user.classId}">
          编辑
        </button>
        <a th:href="@{'/admin/users/delete/' + ${user.userId}}"
           class="btn btn-sm btn-danger"
           onclick="return confirm('确定删除该用户吗？')">
          删除
        </a>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<!-- 编辑用户模态框 -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">编辑用户</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form th:action="@{/admin/users/update}" method="post">
        <input type="hidden" name="userId" id="editUserId">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">用户名</label>
            <input type="text" class="form-control" name="userName" id="editUserName" required>
          </div>
          <div class="mb-3">
            <label class="form-label">角色</label>
            <select class="form-select" name="role" id="editRole" required>
              <option value="student">学生</option>
              <option value="teacher">教师</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">邮箱</label>
            <input type="email" class="form-control" name="email" id="editEmail" required>
          </div>
          <div class="mb-3">
            <label class="form-label">手机号</label>
            <input type="text" class="form-control" name="phone" id="editPhone">
          </div>
          <div class="mb-3">
            <label class="form-label">真实姓名</label>
            <input type="text" class="form-control" name="realName" id="editRealName">
          </div>
          <div class="mb-3">
            <label class="form-label">班级ID（仅学生）</label>
            <input type="number" class="form-control" name="classId" id="editClassId">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存更改</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 脚本：处理模态框数据填充 -->
<script>
  document.getElementById('editModal').addEventListener('show.bs.modal', function (event) {
    const button = event.relatedTarget;
    const userId = button.getAttribute('data-userid');
    const userName = button.getAttribute('data-username');
    const role = button.getAttribute('data-role');
    const email = button.getAttribute('data-email');
    const phone = button.getAttribute('data-phone');
    const realName = button.getAttribute('data-realname');
    const classId = button.getAttribute('data-classid');

    document.getElementById('editUserId').value = userId;
    document.getElementById('editUserName').value = userName;
    document.getElementById('editRole').value = role;
    document.getElementById('editEmail').value = email;
    document.getElementById('editPhone').value = phone || '';
    document.getElementById('editRealName').value = realName || '';
    document.getElementById('editClassId').value = classId || '';
  });
</script>
</body>
</html>